<template>
	<view>
		<view class="title">设置登录密码</view>
		<view class="tip">
			<view class="tipTitle">原密码：</view>
		</view>
		<input :password="!isChecked" v-model="oldPwd" placeholder="请输入" placeholder-class="inputDefault" />
		<view class="tip">
			<view class="tipTitle">新密码：</view><text>（最少8位，至少包括一个大写字母、一个小写字母、一个数字）</text>
		</view>
		<input :password="!isChecked" v-model="newPwd" placeholder="请输入" placeholder-class="inputDefault" />
		<view class="tip">
			<view class="tipTitle">确认新密码：</view><text>（最少8位，至少包括一个大写字母、一个小写字母、一个数字）</text>
		</view>
		<input :password="!isChecked" v-model="newPwdConfirm" placeholder="请输入" placeholder-class="inputDefault" />
		<view class="radioGroup" @tap="isChecked =! isChecked">
			<radio color="#FF9900" :checked="isChecked" /><text>显示密码</text>
		</view>
		<button class="btnConfirm" @click="changePwd">确定</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				oldPwd: '', //原密码
				newPwd: '', //新密码
				newPwdConfirm: '', //确认新密码
				isChecked: false, //是否显示密码
			}
		},
		methods: {
			// 修改密码
			changePwd() {
				// 判断数据是否全部输入完毕
				if (!this.oldPwd) {
					this.showDialog('请输入旧密码')
					return false
				}
				if (!this.newPwd) {
					this.showDialog('请输入新密码')
					return false
				}
				if (!this.newPwdConfirm) {
					this.showDialog('请再次确认新密码')
					return false
				}
				var data = {
					'old_pwd': this.oldPwd,
					'pwd': this.newPwd
				}
				var reg = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d).{8,}$/; //密码验证规则
				if (!reg.test(this.newPwd)) {
					this.showDialog('新密码格式不正确')
				} else {
					if (this.newPwd != this.newPwdConfirm) {
						this.showDialog('您两次输入的密码不一致')
					} else {
						this.$zapi.apiPost('user/currency.basic/UpdatePas', data).then(res => {
							if (res.data.code == 200) {
								this.showDialog('密码修改成功')
								this.$zapi.apiPost('user/currency.basic/UserLoginOut').then(res => {
									return
								})
								uni.setStorageSync('token', '');
								setTimeout(function() {
									uni.reLaunch({
										url: '/pages/user/login'
									})
								}, 3000);
							} else {
								this.showDialog(res.data.msg)
							}
						})
					}
				}
			},
			// 提示框
			showDialog(msg, icon) {
				var newIncon = 'none';
				if (icon) {
					newIncon = icon;
				}
				uni.showToast({
					title: msg,
					icon: newIncon
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #FAFAFA;
		margin: 30upx 30upx 0;
		width: calc(100% - 60upx);
	}

	.title,
	.tip {
		color: #333333;
	}

	.tip {
		display: flex;
		margin: 30upx 0 20upx;

		.tipTitle {
			white-space: nowrap;
		}

		text {
			color: #C0C4CC;
			font-size: 24upx;
		}
	}

	input {
		height: 86upx;
		line-height: 86upx;
		text-indent: 30upx;
		border: 2upx solid #DCDFE6;
		border-radius: 10upx;
	}

	.inputDefault {
		color: #C0C4CC;
		font-size: 28upx;
	}

	.radioGroup {
		display: flex;
		align-items: center;
		margin-top: 20upx;
	}

	radio {
		transform: scale(0.7);
	}

	.btnConfirm {
		color: #FFFFFF;
		background: #FF9900;
		position: absolute;
		bottom: 68upx;
		left: 30upx;
		width: calc(100% - 60upx);
	}

	.btnConfirm:after {
		border: none;
	}
</style>
